<template>
  <div>
    <Layout :showHome="false" :showH="false">
      <div class="container">
        <div class="header">
          <router-link to="/my"><van-icon name="arrow-left" /></router-link>
          <h2>个人信息</h2>
          <van-icon name="" />
        </div>
      </div>
      <van-form color="">
        <div class="top">
          <van-uploader v-model="fileList" multiple :max-count="1">
          </van-uploader>
        </div>
        <van-button
          icon="upgrade"
          type="primary"
          class="getmoney"
          plain
          color="#3d8cf7"
          @click="upload"
          >确认更改头像</van-button
        >
        <div class="info">
          <van-field v-model="username" name="用户名" label="用户名" readonly />
        <van-field v-model="phone" name="密码" label="手机号" readonly />
        <van-field v-model="sex" name="性别" label="性别" readonly />
        <van-field v-model="identity" name="身份证" label="身份证" readonly />
        <van-field
          v-model="address"
          name="个人地址"
          label="个人地址"
          readonly
        />
        </div>
      </van-form>
    </Layout>
  </div>
</template>

<script>
import { editImgApi, usersApi } from "@/apis/myApi";
import { editMoneyApi } from "@/apis/myApi";
export default {
  data() {
    return {
      username: "",
      phone: "",
      address: "",
      identity: "",
      List: [{}],
      sex: "",
      fileList: [
        {
          content: this.upImg,
        },
      ],
    };
  },
  created() {
    // this.username = this.getName();
    this.getName();
    this.ceshi();
  },
  methods: {
    // 信息更新
    async getName() {
      this.userId = this.$store.getters["common/userId"];
      let result = await usersApi(this.userId);
      this.username = result.name || "用户1";
      this.phone = result.phone || "请设置电话号码";
      this.address = result.address || "四川省成都市";
      this.sex = result.sex || "未知";
      this.identity = result.IDcard || "未实名认证";
    },
    async ceshi() {
      // 这也去修改数据库中的图片路径
      let newImg = this.fileList[0].content;
      let result = await editImgApi(this.userId, newImg);
      // 这样去给页面赋值
      this.upImg = result.img;
      this.fileList[0].content = this.upImg;
    },
    async upload() {
      // 这也去修改数据库中的图片路径
      let newImg = this.fileList[0].content;
      let result = await editImgApi(this.userId, newImg);
      // 这样去给页面赋值
      this.upImg = result.img;
      this.fileList[0].content = this.upImg;
      this.$toast.success('头像更改成功！')
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../style/common.less";
.container {
  padding: 0 20px;
  .header {
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h2 {
      font-size: 1rem;
      font-weight: normal;
      margin: 0;
    }
  }
}
.van-form .van-cell {
  color: #030852;
}
.getmoney {
  border-radius: 10px;
  position: absolute;
  top: 95px;
  left: 200px;
  padding: 0;
}
.van-uploader__preview-delete .van-uploader__preview-delete {
  position: fixed;
  top: 1px;
  left: 1px;
}
.top {
  margin-left: 107px;
  display: block;
  float: left;
  top: 1px;
  left: 1px;
  width: 80px;
  height: 80px;
  border-radius: 37px;
  margin-top: 30px;
  margin-bottom: 20px;
  // overflow: hidden;
}
.info{
  margin-left: 20px;
}
.van-field {
  color: black;
}
</style>